<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" :leftIconSize="0" :placeholder="true" bgColor="transparent" title="我的">
        </u-navbar>
        <Footer :footState="4" :num="messageCount"></Footer>
        <view class="xilu_top_block">
            <image src="../../static/icon/bg.png" class="bg" mode="widthFix"></image>
        </view>
        <view class="container pt30 plr30">
            <!--  -->
            <view class="flex-box">
                <view class="flex-grow-1" @click="jump('/pages/base_info/base_info',1)">
                    <view class="fs36 col10 fwb pb20">{{userinfo.nickname || '请登录'}}</view>
                    <view class="flex-box">
                        <image src="../../static/icon/phone.png" mode="aspectFill" class="phone"></image>
                        <view class="fs30 col89">{{userinfo.mobile || '请登录'}}</view>
                    </view>
                </view>
                <view class="relative" @click="jump('/pages/base_info/base_info',1)">
                    <image :src="userinfo.avatar || ''" mode="aspectFill" class="xilu_avatar"></image>
                    <image src="../../static/icon/edit_avatar.png" mode="aspectFill" class="xilu_edit_avater"></image>
                </view>
            </view>
            <!--  -->
            <view class="flex-box xilu_num">
                <view class="xilu_num_item tc" @click="jump('/pages/my_collection/my_collection',1)">
                    <view class="fs34 fwb col10 pb20">{{userinfo.collection_count || 0}}</view>
                    <view class="fs24 col89">收藏</view>
                </view>
                <view class="xilu_num_item tc" @click="jump('/pages/my_focus/my_focus',1)">
                    <view class="fs34 fwb col10 pb20">{{userinfo.focus_count || 0}}</view>
                    <view class="fs24 col89">关注</view>
                </view>
                <view class="xilu_num_item tc" @click="jump('/pages/my_browse/my_browse',1)">
                    <view class="fs34 fwb col10 pb20">{{userinfo.view_count || 0}}</view>
                    <view class="fs24 col89">浏览数</view>
                </view>
                <view class="xilu_num_item tc" @click="jump('/pages/my_fans/my_fans',1)">
                    <view class="fs34 fwb col10 pb20">{{userinfo.fans_count || 0}}</view>
                    <view class="fs24 col89">粉丝</view>
                </view>
                <view class="xilu_num_item tc" @click="jump('/pages/home_page/home_page?tab=forum',1)">
                    <view class="fs34 fwb col10 pb20">{{userinfo.forum_count || 0}}</view>
                    <view class="fs24 col89">帖子</view>
                </view>
            </view>
            <!--  -->
            <view class="fs34 fwb col10 pb40">我的交易</view>
            <view class="flex-box flex-between">
                <view @click="jump('/pages/my_buy/my_buy',1)" class='hint-num'>
                    <text v-if="userinfo.buy_order_count>0">{{userinfo.buy_order_count}}</text>
                    <view class="xilu_trade_box flex-box flex-center">
                        <image src="../../static/icon/mine_trade3.png" mode="aspectFill"></image>
                    </view>
                    <view class="col3 tc">我买到的</view>
                </view>
                <view @click="jump('/pages/my_sale/my_sale',1)" class='hint-num'>
                    <text v-if="userinfo.sale_order_count>0">{{userinfo.sale_order_count}}</text>
                    <view class="xilu_trade_box flex-box flex-center">
                        <image src="../../static/icon/mine_trade2.png" mode="aspectFill"></image>
                    </view>
                    <view class="col3 tc">我卖出的</view>
                </view>
               <view @click="jump('/pages/my_unused/my_unused',1)" class='hint-num'>
                   <text v-if="userinfo.sale_product_count>0">{{userinfo.sale_product_count}}</text>
                   <view class="xilu_trade_box flex-box flex-center">
                       <image src="../../static/icon/mine_trade1.png" mode="aspectFill"></image>
                   </view>
                   <view class="col3 tc">我闲置的</view>
               </view>
                <view class="hint-num">
                    <text v-if="userinfo.recovery_count>0">{{userinfo.recovery_count}}</text>
                    <view class="xilu_trade_box flex-box flex-center" @click="jump('/pages/my_recovery/my_recovery')">
                        <image src="../../static/icon/mine_trade4.png" mode="aspectFill"></image>
                    </view>
                    <view class="col3 tc">我回收的</view>
                </view>
                <view @click="jump('/pages/my_income/my_income',1)" class='hint-num'>
                    <view class="xilu_trade_box flex-box flex-center">
                        <image src="../../static/icon/mine_trade5.png" mode="aspectFill"></image>
                    </view>
                    <view class="col3 tc">我的收入</view>
                </view>
            </view>
            <!--  -->
            <view class="fs34 col10 fwb pb30 pt70">我的互动</view>
            <view class="flex-box flex-between">
                <view class="xilu_trade" @click="jump('/pages/home_page/home_page?tab=forum',1)">
                    <view class="fs30 col3 pb10">我的帖子</view>
                    <view class="fs24 col89 pb20">{{userinfo.forum_count || 0}}条帖子</view>
                    <image src="../../static/icon/mine_interaction1.png" mode="aspectFill" class="xilu_interact">
                    </image>
                </view>
                <view class="xilu_trade" @click="jump('/discovery/my_trends/my_trends',1)">
                    <view class="fs30 col3 pb10">我的圈子</view>
                    <view class="fs24 col89 pb20">{{userinfo.topic_count || 0}}条话题</view>
                    <image src="../../static/icon/mine_interaction2.png" mode="aspectFill" class="xilu_interact">
                    </image>
                </view>
                <view class="xilu_trade" @click="jump('/pages/common_problem/common_problem',0)">
                    <view class="fs30 col3 pb10">常见问题</view>
                    <view class="fs24 col89 pb20">帮你答疑解惑</view>
                    <image src="../../static/icon/mine_interaction3.png" mode="aspectFill" class="xilu_interact">
                    </image>
                </view>
            </view>
            <!--  -->
            <button hover-class="none" class="mine_kefu" open-type="contact">
                <image src="../../static/icon/mine_kefu.png" mode="aspectFill"></image>
            </button> 
        </view>
    </view>
</template>

<script>
    import Footer from "@/components/footer/footer.vue";
	const chatIM = require('../../xilu/chat.js');
    export default {
        components: {
            Footer,
        },
        data() {
            return {
				userinfo:{},
				messageCount:0,
            };
        },
		onLoad() {
			let page = this;
			uni.$on("unread_count",function(data){
				page.messageCount = getApp().globalData.chat_config.messageCount
			});
			if (getApp().globalData.chat_config.SocketTask) {
			   chatIM.setMessageBadge(false)
			}
			if(this.$core.getUserinfo()) {
				this.getUserinfo();
			}
			uni.$on("user_update",function(){
				page.getUserinfo();
			})
		},
		onUnload() {
			uni.$off("unread_count");
			uni.$off("user_update");
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods:{
			getUserinfo(){
				this.$core.post({url: 'xilumarket.user/info',data: {},loading: false,success: ret => {
						this.userinfo = ret.data;
					},fail: err => {
						console.log(err);
					}
				});
			},
			jump(url,needLogin){
				if(needLogin){
					if(!this.$core.getUserinfo(true)){
						return true;
					}
				}
				uni.navigateTo({
					url: url
				})
			}
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        .relative {
            width: 130rpx;
            height: 130rpx;
        }

        &_avatar {
            width: 130rpx;
            height: 130rpx;
            position: relative;
            z-index: 1;
            border-radius: 50%;
        }

        &_edit_avater {
            position: absolute;
            right: 5rpx;
            bottom: 0;
            z-index: 2;
            width: 30rpx;
            height: 30rpx;
        }

        &_num {
            padding-top: 50rpx;
            padding-bottom: 70rpx;

            &_item {
                width: 140rpx;
            }
        }

        &_trade_box {
            width: 104rpx;
            height: 104rpx;
            border-radius: 15rpx;
            background: #F7F9FC;
            line-height: 104rpx;
            margin: 0 auto 30rpx;

            image {
                width: 52rpx;
                height: 52rpx;
            }
        }

        &_interact {
            width: 45rpx;
            height: 45rpx;
        }

        &_trade {
            width: 210rpx;
            height: 210rpx;
            border-radius: 20rpx;
            background: #f7f9fc;
            padding: 32rpx 30rpx;
        }

        .mine_kefu {
            width: 170rpx;
            height: 170rpx;
            position: fixed;
            bottom: 20%;
            right: 0rpx;

            image {
                width: 170rpx;
                height: 170rpx;
            }
        }

        .container {
            min-height: auto;
            background: transparent;
        }

        &_top_block {
            width: 750rpx;
            height: 500rpx;
            background: linear-gradient(180deg, rgba(255, 193, 0, 0.1) 0%, rgba(255, 193, 0, 0) 100%);
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
        .hint-num text{
            right: 0;
        }
    }
    .bg{
        z-index: 0;
    }
</style>
